<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>交易记录</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

</head>
<body>

<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a href="#" onclick="window.history.back(); return false;" class="icon icon-left pull-left">
                返回
            </a>
            <h1 class="title">交易记录</h1>
        </header>

        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom " data-ptr-distance="55" data-distance="400">
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>

            <div class="list">

            </div>
            <div class="infinite-scroll-preloader" >
                <div class="preloader"></div>
            </div>
        </div>

    </div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript">
    var pageNo=1;
    var pageSize=3;
    // 上次加载的序号
    var lastIndex = 0;
    // 最多可加载的条目
    var maxItems = 0;
    $.initPullToRefresh(".pull-to-refresh-content");
    $(document).on('refresh', '.pull-to-refresh-content',function(e) {
        setTimeout(function () {
            pageNo=1;
            $.ajax({
                "url": "/order/queryData",
                "type": "POST",
                data:{pageNo:pageNo,pageSize:pageSize},
                success:function (result) {
                    var data=result.data;
                    $('.pull-to-refresh-content .list').html('');
                    for(var i=0;i<data.length;i++){
                        var html = '';
                        html+='<div class="list-block"><ul class="list-container">'
                        html+='<li class="item-content"><div class="item-inner">'+
                            '<div class="item-title">等级名称</div>'+
                            '<div class="item-after">'+
                            data[i].levelName+
                            '</div>'+
                            '</div>'+
                            '</li>'
                        html+='<li class="item-content"><div class="item-inner">'+
                            '<div class="item-title">数量</div>'+
                            '<div class="item-after">'+
                            data[i].quantity+
                            '</div>'+
                            '</div>'+
                            '</li>'
                        html+='<li class="item-content"><div class="item-inner">'+
                            '<div class="item-title">状态</div>'+
                            '<div class="item-after">'+
                            data[i].status+
                            '</div>'+
                            '</div>'+
                            '</li>'
                        html+='<li class="item-content"><div class="item-inner">'+
                            '<div class="item-title">创建时间</div>'+
                            '<div class="item-after">'+
                            data[i].createdTime+
                            '</div>'+
                            '</div>'+
                            '</li>'
                        html+='<li class="item-content"><div class="item-inner">'+
                            '<div class="item-title">审批时间</div>'+
                            '<div class="item-after">'+
                            data[i].updatedTime+
                            '</div>'+
                            '</div>'+
                            '</li>'
                        html+='</ul>'
                        html+='</div>'

                        $('.pull-to-refresh-content .list').append(html);
                    }
                    pageNo++;
                    $.pullToRefreshDone('.pull-to-refresh-content');
                }
            })
        },1000)

    });

    // 加载flag
    var loading = false;

    function addItems(pageNo, pageSize) {

        // 生成新条目的HTML
        $.ajax({
            "url": "/order/queryData",
            "type": "POST",
            async:false,
            data:{pageNo:pageNo,pageSize:pageSize},
            success:function (result) {
                console.log(result);

                maxItems=result.recordsTotal;
                var data=result.data;

                for(var i=0;i<data.length;i++) {
                    var html = '';
                    html+='<div class="list-block"><ul class="list-container">'
                    html += '<li class="item-content"><div class="item-inner">' +
                        '<div class="item-title">等级名称</div>' +
                        '<div class="item-after">' +
                        data[i].levelName +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    html += '<li class="item-content"><div class="item-inner">' +
                        '<div class="item-title">数量</div>' +
                        '<div class="item-after">' +
                        data[i].quantity +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    html += '<li class="item-content"><div class="item-inner">' +
                        '<div class="item-title">状态</div>' +
                        '<div class="item-after">' +
                        data[i].status +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    html += '<li class="item-content"><div class="item-inner">' +
                        '<div class="item-title">创建时间</div>' +
                        '<div class="item-after">' +
                        data[i].createdTime +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    html += '<li class="item-content"><div class="item-inner">' +
                        '<div class="item-title">审批时间</div>' +
                        '<div class="item-after">' +
                        data[i].updatedTime +
                        '</div>' +
                        '</div>' +
                        '</li>'
                    html+='</ul>'
                    html+='</div>'

                    $('.infinite-scroll-bottom .list ').append(html);
                }
                lastIndex = $('.list .list-block').length;
                if (lastIndex >=maxItems) {
                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    loading=true;
                    console.log('loading'+loading);
                    return;
                }
                $('.infinite-scroll-preloader').hide();
                loading=false;
                pageNo++;
            }
        })
    }

    //预先加载第一页
    $(document).ready(function () {
        $('.infinite-scroll-preloader').hide();
        $.showPreloader();
        setTimeout(function () {
            $.hidePreloader();
            addItems(pageNo, pageSize);
        }, 2000);
    })

    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom',function() {

        console.log('滚动');
        // 如果正在加载，则退出
        if (loading) return;

        // 设置flag
        loading = true;
        $('.infinite-scroll-preloader').show();
        setTimeout(function () {
            addItems(pageNo, pageSize);
            if (lastIndex >= maxItems){
                return;
            }
            pageNo++;
            $.refreshScroller();
        },1000)

    });
    $.init();

</script>
<style>

    .infinite-scroll-preloader {
        margin-top:-20px;
    }
</style>
</body>
</html>